<template>
    <section
        :style="{
            paddingTop: itemConfig.paddingTop + 'px',
            paddingBottom: itemConfig.paddingBottom + 'px',
            marginTop: itemConfig.marginTop + 'px',
            marginBottom: itemConfig.marginBottom + 'px',
            background: `linear-gradient(
                ${itemConfig.bgEdg}deg,
                ${itemConfig.bgColorOne},
                ${itemConfig.bgColorTow},
                ${itemConfig.bgColorThree})`
        }"
    >
        <div class="max-w-[1200px] m-auto px-5">
            <div
                v-if="itemConfig.title || itemConfig.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: itemConfig.headerBottom + 'px' }"
            >
                <h3
                    v-if="itemConfig.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: itemConfig.titleColor }"
                >{{ itemConfig.title }}</h3>

                <p
                    v-if="itemConfig.intro"
                    class="text-center text-lg"
                    :style="{ color: itemConfig.introColor }"
                >{{ itemConfig.intro }}</p>
            </div>

            <template v-for="(item, index) in (itemData as itemDataType[])">
                <div
                    v-if="item.isEnable"
                    :key="index"
                    class="border mb-7 last:mb-0 hover:shadow-sm"
                    :style="{
                        padding: '20px 30px',
                        borderRadius: item.brRadius + 'px',
                        borderColor: item.brColor,
                        background: item.bgColor
                    }"
                >
                    <h3
                        class="tracking-[4px] text-2xl leading-[30px] font-medium"
                        :style="{
                            color: item.titleColor
                        }"
                    >
                        {{ item.title }}
                    </h3>

                    <p
                        class="text-lg leading-[30px] mt-3.5"
                        :style="{
                            color: item.contentColor
                        }"
                    >
                        {{ item.content }}
                    </p>
                </div>
            </template>
        </div>
    </section>
</template>

<script setup lang="ts">
interface itemConfigType {
    title: string;
    intro: string;
    paddingTop: number;
    paddingBottom: number;
    marginTop: number;
    marginBottom: number;
    headerBottom: number;
    bgEdg: number;
    bgColorOne: string;
    bgColorTow: string;
    bgColorThree: string;
    titleColor: string;
    introColor: string;
}

interface itemDataType {
    title: string;
    content: string;
    brColor: string;
    bgColor: string;
    titleColor: string;
    contentColor: string;
    brRadius: number;
    isEnable: boolean;
}

withDefaults(
    defineProps<{
        itemConfig?: itemConfigType,
        itemData?: itemDataType[]
    }>(),
    {
        itemConfig: {} as itemConfigType | any,
        itemData: [] as itemDataType[] | any
    }
)
</script>
